<%@ Page Language="c#" MasterPageFile="../../../masterpages/umbracoDialog.Master" CodeBehind="CategorySortDialog.aspx.cs" AutoEventWireup="True" Inherits="Auros.Categorisation.Umbraco.Dialogs.CategorySortDialog" %>

<%@ Register TagPrefix="cc1" Namespace="umbraco.uicontrols" Assembly="controls" %>
<%@ Register TagPrefix="umb" Namespace="ClientDependency.Core.Controls" Assembly="ClientDependency.Core" %>

<%@ Import Namespace="Auros.Categorisation.Umbraco" %>

<asp:Content ContentPlaceHolderID="head" runat="server">
    <style type="text/css">
        #sortableFrame
        {
            height: 270px;
            overflow: auto;
            border: 1px solid #ccc;
        }
        #sortableNodes
        {
            padding: 4px;
            display: block;
        }
        #sortableNodes thead tr th
        {
            border-bottom: 1px solid #ccc;
            padding: 4px;
            padding-right: 25px;
            background-image: url(<%= umbraco.IO.IOHelper.ResolveUrl(umbraco.IO.SystemDirectories.Umbraco_client) %>/tableSorting/img/bg.gif);
            cursor: pointer;
            font-weight: bold;
            background-repeat: no-repeat;
            background-position: center right;
        }
        
        #sortableNodes thead tr th.headerSortDown
        {
            background-image: url(<%= umbraco.IO.IOHelper.ResolveUrl(umbraco.IO.SystemDirectories.Umbraco_client) %>/tableSorting/img/desc.gif);
        }
        
        #sortableNodes thead tr th.headerSortUp
        {
            background-image: url(<%= umbraco.IO.IOHelper.ResolveUrl(umbraco.IO.SystemDirectories.Umbraco_client) %>/tableSorting/img/asc.gif);
        }
        
        #sortableNodes tbody tr td
        {
            border-bottom: 1px solid #efefef;
        }
        #sortableNodes td
        {
            padding: 4px;
            cursor: move;
        }
        tr.tDnD_whileDrag, tr.tDnD_whileDrag td
        {
            background: #dcecf3;
            border-color: #a8d8eb !important;
            margin-top: 20px;
        }
        #sortableNodes .nowrap
        {
            white-space: nowrap;
        }
    </style>
</asp:Content>

<asp:Content ContentPlaceHolderID="body" runat="server">
    <umb:JsInclude ID="JsInclude1" runat="server" FilePath="tablesorting/tableFilter.js" PathNameAlias="UmbracoClient" />
    <umb:JsInclude ID="JsInclude2" runat="server" FilePath="tablesorting/tableDragAndDrop.js" PathNameAlias="UmbracoClient" />
    <div id="loading" style="display: none;">
        <div class="notice">
            <p><%= UIHelpers.GetLocalisedText("sortPleaseWait", "sort") %></p>
        </div>
        <br />
        <cc1:ProgressBar ID="prog1" runat="server" />
    </div>
    <div id="sortingDone" style="display: none;" class="success">
        <p><%= UIHelpers.GetLocalisedText("sortComplete", "categories", "Sorting complete.") %></p>
        <p><a href="#" onclick="UmbClientMgr.closeModalWindow()"><%= UIHelpers.GetLocalisedText("closeThisWindow", "defaultdialogs") %></a></p>
    </div>
    <div id="sortingFailed" style="display: none;" class="error">
        <p><%= UIHelpers.GetLocalisedText("sortFailed", "categories", "Sorry, we encountered a problem, please try again.") %></p>
        <p><a href="#" onclick="UmbClientMgr.closeModalWindow()"><%= UIHelpers.GetLocalisedText("closeThisWindow", "defaultdialogs") %></a></p>
    </div>
    <div id="sortArea">
        <cc1:Pane runat="server" ID="sortPane">
            <p class="help"><%= UIHelpers.GetLocalisedText("sortHelp", "sort") %></p>
            <div id="sortableFrame">
                <table id="sortableNodes" cellspacing="0">
                    <colgroup>
                        <col />
                        <col />
                    </colgroup>
                    <thead>
                        <tr>
                            <th style="width: 100%"><%= UIHelpers.GetLocalisedText("categoryName", "categories", "Category Name") %></th>
                            <th><%= UIHelpers.GetLocalisedText("categoryId", "categories", "Category ID") %></th>
                        </tr>
                    </thead>
                    <tbody>
                        <asp:Literal ID="lt_nodes" runat="server" />
                    </tbody>
                </table>
            </div>
            <input runat="server" class="hiddenOrder" id="sortOrder" type="hidden" value="" disabled="disabled" />
        </cc1:Pane>
        <br />
        <p><input type="button" onclick="submitSort(); return false;" value='<%= UIHelpers.GetLocalisedText("save", "buttons", "Save") %>' /> <em>or</em> <a href="#" style="color: blue" onclick="UmbClientMgr.closeModalWindow()"><%= UIHelpers.GetLocalisedText("cancel", "general", "Cancel") %></a></p>
    </div>

    <script type="text/javascript">

     jQuery(document).ready(function() {
        sort();
        
        jQuery("#sortableNodes").tablesorter().bind("sortEnd", sort);
        
        jQuery("#sortableNodes").tableDnD({containment: jQuery("#sortableFrame"), onDrop: sort } );
       
     });


     function sort() {
        var rows = jQuery("#sortableNodes tbody tr");
        var sortOrder = "";

        jQuery.each(rows, function() {
            sortOrder += jQuery(this).attr("id").replace(/[^0-9]/g, "") + ",";
            jQuery("#sortArea .hiddenOrder").val(sortOrder);
        });
     }

    
    function submitSort() {
        var sortOrder = jQuery("#sortArea .hiddenOrder").val();
               
        jQuery("#sortingDone").hide();
        jQuery("#sortArea").hide();
                
        jQuery("#loading").show();  

        $.ajax({
            type: "POST",
            url: "<%= umbraco.IO.IOHelper.ResolveUrl(umbraco.IO.SystemDirectories.Umbraco)%>/webservices/categorisation/UpdateSortOrder",
            data: '{ "parentId": ' + parseInt(<%= this.GetParentNodeID() %>) + ', "sortOrder": "' + sortOrder + '"}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(msg) {
                showConfirm();
            },
            error: function (msg) {
                showFail(msg);
            }
        });

      }
       
      function showConfirm() {      
            jQuery("#loading").hide();	    
            jQuery("#sortingDone").show();	
            UmbClientMgr.mainTree().reloadActionNode();
      }

      function showFail(message) {
          jQuery("#loading").hide();
          jQuery("#sortingFailed").show();
      }
          
    </script>
</asp:Content>
